<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0 auto;
			}
			h4{
				text-align: center;
			}
			#employeeTable th,td{
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<th>Tom</th>
				<th>tom@tom.com</th>
				<th>5000</th>
				<th><a href="script:;">Delete</a></th>
			</tr>
			<tr>
				<th>Jerry</th>
				<th>jerry@sohu.com</th>
				<th>8000</th>
				<th><a href="script:;">Delete</a></th>
			</tr>
			<tr>
				<th>Bob</th>
				<th>bob@tom.com</th>
				<th>10000</th>
				<th><a href="script:;">Delete</a></th>
			</tr>
		</table>
		<div>
			<h4>添加新员工</h4>
			<table>
				<tr>
					<td class="word">name:</td>
					<td class="inp">
						<input type="text" name="empName" id="empName"/>
					</td>
				</tr>
				<tr>
					<td class="word">Email:</td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">Salary:</td>
					<td class="inp">
						<input type="text" name="salary" id="salary"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button type="button" id="addEmpButton" value="abc">
							Submit
						</button>
					</td>
				</tr>
			</table>
		</div>
		<script type="text/javascript">
			var allA = document.getElementsByTagName("a");
			function delA(){
				var c = this.parentNode.parentNode;
				var name = c.children[0].innerHTML;
				var con = confirm("确认删除"+name+"吗？");
				if(con){
					c.parentNode.removeChild(c);
				}
					return 0;
			}
			for(var i = 0; i < allA.length ; i++){
				allA[i].onclick = delA;
			}
			var tagname = document.getElementById("empName");
			var tagemail = document.getElementById("email");
			var tagsalary = document.getElementById("salary");
			var sub = document.getElementById("addEmpButton");
			var table = document.getElementById("employeeTable");
			var tbody = table.getElementsByTagName("tbody")[0];
			sub.onclick = function(){
				var tr = document.createElement("tr");
				var thname = document.createElement("th");
				var thmail = document.createElement("th");
				var thsalary = document.createElement("th");
				var tha = document.createElement("th");
				thname.innerHTML = tagname.value;
				tr.appendChild(thname);
				thmail.innerHTML = tagemail.value;
				tr.appendChild(thmail);
				thsalary.innerHTML = tagsalary.value;
				tr.appendChild(thsalary);
				var a = document.createElement("a");
				a.href="script:;";
				a.innerHTML="Delete";
				a.onclick = delA;
				tha.appendChild(a);
				tr.appendChild(tha);
				tbody.appendChild(tr);
				// 更加简单的写法
				// tr.innerHTML = "<td>"+name+"</td>"+	
				// 				"<td>"+email+"</td>"+	
				// 				"<td>"+salary+"</td>"+	
				// 				"<td><a href='script:;'>Delete</a></td>";
				
			};
		</script>
	</body>
</html>
